<template>
    <div>

        <div class="accounthead">
                <span>关键词模块维护</span>
        </div>

       <div class="bigbox">
           <div class="searchbox">
                <el-input placeholder="请输入模块名称" v-model="template" class="input-with-select searchInput" @keyup.native.enter="searchTemplateBtn">
                    <el-button slot="append" icon="el-icon-search" class="searchBtn" @click="searchTemplateBtn"></el-button>
                </el-input>

                 <div class="newBtn" @click="toNewKeywords">+ 新建模板</div>
            </div>

            <div class="keyword" v-for="(item, index) in templatelist" :key="index">

               <div class="keywordbody">
                  <div class="keywordbodyT">
                     <span>{{item.name}}</span>
                     <span class="key15" v-if="item.checked == true">默认模板</span>
                     <!-- <img src="../../assets/laji.png" class="lajiico" alt="" @click="deleteList(item.id)"> -->
                     <svg version="1.1" class="penSvg lajiico" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve" @click="deleteList(item.id)">
                    <path class="st0" d="M19.1,2.4h-3.5V1.2c0-0.6-0.4-1-1-1H5.3c-0.6,0-1,0.4-1,1v1.2H0.8c-0.4,0-0.7,0.4-0.7,0.8
                        c0,0.4,0.3,0.7,0.7,0.7h18.3c0.4,0,0.7-0.3,0.7-0.7C19.8,2.8,19.5,2.4,19.1,2.4L19.1,2.4z M16.3,5.4H3.6c-0.2,0-0.4,0-0.5,0.2
                        C3,5.7,2.9,5.9,2.9,6.1v11.7c0,1.2,1,2.1,2.1,2.1h9.9c1.2,0,2.1-1,2.1-2.1V6.1C17,5.7,16.7,5.4,16.3,5.4L16.3,5.4z M8.1,16.6
                        c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V9c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7V16.6z M13.2,16.6
                        c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V9c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7V16.6z M13.2,16.6"/>
                    <rect x="-354.3" y="-271.1" class="st1" width="20" height="20"/>
                    </svg>


                     <!-- <img src="../../assets/pen.png" class="penico" alt="" @click="updateList(item.id)"> -->
                      <svg version="1.1" class="penSvg penico" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve" @click="updateList(item.id)">>>
                     <rect x="-354.3" y="-271.1" class="st0" width="20" height="20"/>
                     <polygon class="st1" points="1.7,18.5 2.5,14.8 5.3,17.6 "/>
                     <g>
                        <path class="st1" d="M18.5,4.3l1-1c0.2-0.2,0.2-0.5,0-0.7l-2.1-2.1c-0.2-0.2-0.5-0.2-0.7,0l-1,1L18.5,4.3z"/>
                        <rect x="1.7" y="7.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.6929 10.2382)" class="st1" width="17.7" height="3.9"/>
                     </g>
                     </svg>
                  </div>
                  <div class="keywordbodyB">
                     <span>更新于{{item.updateTime}}</span>
                  </div>
               </div>
            </div>
          
             <div class="pagebox">
                 <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage3"
                :page-size="3"
                layout="total, prev, pager, next, jumper"
                :total= pagetotal>
                </el-pagination>
            </div>
            </div>      
       </div>

        <el-dialog title="编辑模板" :visible.sync="exitFormVisible">
         <el-form>
           <div class="moudlename">
              <div>模板名称</div>
              <input type="text" class="moudleinput" placeholder="模板名称" v-model="updateLi.name">
           </div>

           <div class="moudlename">
              <div>所属模块</div>
              <input type="text" class="moudleinput disInput" placeholder="模板名称" v-model="updateLi.module.name" disabled>
           </div>

            <div class="moudlecon">
               <div class="text1">关键词模板</div>
               <div class="text2">请输入主体（一行一个）</div>
               <textarea v-html="updateLi.textareaText" id="keytext" @change="changeText"></textarea>
               <!-- <el-checkbox>设为默认模板</el-checkbox>  @change="changeText"-->
            </div>
            <el-checkbox v-model="checked" class="checkBox">默认模板</el-checkbox>
         </el-form>
          <!-- v-html="updateLi.textareaText"  @click="exittemplateistok"  v-model="checked"-->

         <div slot="footer" class="dialog-footer">
            <el-button @click="exitFormVisible = false">取 消</el-button>
             <!-- @click="updateKey2(updatekeyid)" -->
            <el-button type="danger" @click="exittemplateistok">保 存</el-button>
         </div>
      </el-dialog>



      <el-dialog title="新建模板" :visible.sync="UpdateFormVisible">
         <el-form>
           <div class="moudlename">
              <div>模板名称</div>
              <input type="text" class="moudleinput" placeholder="模板名称" v-model="newmodulename">
           </div>

           <div class="moudlename">
              <div>所属模块</div>
              <el-select v-model="mokuaivalue" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
           </div>

            <div class="moudlecon">
               <div class="text1">关键词模板</div>
               <div class="text2">请输入关键词（一行一个）</div>
               <!-- <textarea v-html="updateLi.textareaText" id="Strtext" @change="changeText"></textarea> -->
               <textarea id="Strtext" v-model="newtextareaText"></textarea>
               <!-- <el-checkbox>设为默认模板</el-checkbox>  @change="changeText"-->
            </div>
            <el-checkbox v-model="flag" class="checkBox">默认模板</el-checkbox>
         </el-form>
          <!-- v-html="updateLi.textareaText"  @click="exittemplateistok"  v-model="checked"-->

         <div slot="footer" class="dialog-footer">
            <el-button @click="UpdateFormVisible = false">取 消</el-button>
             <!-- @click="updateKey2(updatekeyid)"  @click="exittemplateistok" -->
            <el-button type="danger" @click="newModuleOk">保 存</el-button>
         </div>
      </el-dialog>



    </div>

    
</template>

<script>
import {getTemplateList,getTempltateUpdateList,UpdataTemplate, deleteTemplate,ChangeUpdateModule,addTemplateInsert} from '@/api'
export default {
    data () {
        return {
            checked: false,
            template: '',
            templatelist: [],
            exitFormVisible: false,
            formLabelWidth: '120px',
            currentPage3: 5,
            mStr: '',
            updateLi: {
                textareaText: '',
                name: '',
                module: {
                    name: ''
                }
            }, // 修改面板的数据
            pagenum: 1,
            pagetotal: 0,
            updateid: 1,
            morentids: 1,
            morenmids: 1,
            newmodulename: '',
            newtextareaText: '',
            UpdateFormVisible: false,
            flag: false,
             options: [{
                value: '负面舆情',
                label: '负面舆情'
                }, {
                value: '宏观经济',
                label: '宏观经济'
                }, {
                value: '公司新闻',
                label: '公司新闻'
                }, {
                value: '竞争对手',
                label: '竞争对手'
                }, {
                value: '行业信息',
                label: '行业信息'
                }, {
                value: '监管环境',
                label: '监管环境'
                }],
                mokuaivalue: ''
            }
    },
    created () {
        this.initTemplate()
    },
    methods: {
        //ckj 新建模板
        newModuleOk() {
            let keyContents = this.newtextareaText.replace(/\n/g, '+')
            // console.log(keyContents)
            let obj = {
                name: this.newmodulename,
                moduleName: this.mokuaivalue,
                keyContents: keyContents,
                flag: this.flag
            }
            if(obj.name == '' || obj.moduleName == '' || obj.keyContents == '') {
                this.$message({
                message: '请填写好相关信息',
                type: 'warning'
                });
                return false
            }
            // console.log(obj)
            addTemplateInsert(obj)
            .then(res => {
                // console.log(res)
                if(res.statusCode == 200) {
                    this.$message({
                        message: res.statusMsg,
                        type: 'success'
                    });
                    this.UpdateFormVisible = false
                    this.newmodulename = ''
                    this.newtextareaText = ''
                    this.initTemplate()
                } else {
                     this.$message({
                        message: res.statusMsg,
                        type: 'error'
                    });
                }
            })
        },
        //ckj 跳转到新建关键词
        toNewKeywords() {
            // this.$router.push({path: '/keywordSafeguard', query: {open: 'open'}})
            this.mokuaivalue = ''
            this.newmodulename = ''
            this.newtextareaText = ''
            this.UpdateFormVisible = true
        },
        //ckj 删除关键词
        deleteList(id) {
            // console.log(id)
            let obj = {
                id: id
            }
            this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    // console.log(obj)
                    deleteTemplate(obj)
                    .then(res => {
                        // console.log(res)
                        if (res.statusCode == 200) {
                            this.initTemplate()
                             this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
             })
        },
        changeText(e) {
         // console.log(e)
         this.updateLi.textareaText = e.target.value 
      },
        // 编辑模板
        exittemplateistok() {
            if(this.checked == true) {
                let obj = {
                mid: this.morentids,
                tid: this.morenmids
              }
            //   console.log(obj)
              ChangeUpdateModule(obj)
            .then(res => {
                if(res.statusCode == 200) {
                    this.$message({
                        message: res.statusMsg,
                        type: 'success'
                    });
                    this.checked = false
                } else {
                     this.$message({
                        message: res.statusMsg,
                        type: 'error'
                    });
                }
                // console.log(res)
            })
            }
            // console.log(this.updateLi.textareaText)
         let keyContents = (this.updateLi.textareaText.trim().split(/&#10;+/)).join('+')
        keyContents = keyContents.split(/\n+/).join('+')
        if(keyContents.charAt(keyContents.length - 1) == '+') {
            keyContents = keyContents.substring(0, keyContents.length - 1)
        }
        //  console.log(keyContents)
        //  let keyContentstr = keyContents.replace(/\+/g, '')
        //  console.log(keyContentstr.length)
        //  if(keyContentstr.length > 30) {

        //  }
         let obj = {
            id: this.updateid,
            name: this.updateLi.name,
            keyContents: keyContents
         }
        //  console.log(obj)
         if(obj.name == '' ){
             this.$message({
                  message: '模板名称不能为空',
                  type: 'error'
               });
             return false
         }
         UpdataTemplate(obj)
         .then(res => {
            if(res.statusCode ===200) {
               this.$message({
                  message: res.statusMsg,
                  type: 'success'
               });
               this.exitFormVisible = false
            } else {
               this.$message({
                  message: res.statusMsg,
                  type: 'success'
               });
            }
         })
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.pagenum = val
            // console.log(this.pagenum)
            // this.loading =false
            this.initTemplate()
        },
        initTemplate() {
             let obj = {
                pageNum: this.pagenum,
                pageSize: 3,
                name: this.template
            }
            getTemplateList(obj)
            .then(res => {
                // console.log(res)
                this.pagetotal = res.data.total
                // console.log(res.data.list)
                this.templatelist = res.data.list
            })
        },
        searchTemplateBtn() {
            let obj = {
                pageNum: 1,
                pageSize: 3,
                name: this.template
            }
            getTemplateList(obj)
            .then(res => {
                // console.log(res)
                this.pagetotal = res.data.total
                // console.log(res.data.list)
                this.templatelist = res.data.list
            })
        },
        updateList(id) {
            // console.log(id)
            this.updateid = id
            this.exitFormVisible = true
            // ckj 发请求获取数据
            getTempltateUpdateList(id)
            .then(res => {
                // console.log(res.data.id)
                // console.log(res.data.module.id)
                this.morentids = res.data.id
                this.morenmids = res.data.module.id
                if(res.statusCode ===200 ) {
                    // console.log(res.data)  v-model="updateLi.mudule.name"
                    this.updateLi = res.data
                    let keywordArr = res.data.keywords
                    // console.log(keywordArr)
                    let keywordstr = ""
                    for(let i=0; i<keywordArr.length;i++) {
                        keywordstr += keywordArr[i].content+"+"
                    }
                    var keywordstrs = new Array()
                    keywordstrs = keywordstr.split("+")
                    // keywordstrs = keywordstrs.pop()
                    // keywordstrs.slice(0,-1);
                    let mArr = []
                    for(let i = 0; i < keywordstrs.length - 1; i++){
                        mArr.push(keywordstrs[i]);
                    }
                    

                    let mStr =""
                    for(let i = 0; i < mArr.length; i++ ) {
                        // console.log(mArr[i])
                         mStr += mArr[i] + '&#10;'
                    }
                    document.getElementById('keytext').innerHTML = mStr

                    mStr =""
                    for(let i = 0; i < mArr.length; i++ ) {
                        // console.log(mArr[i])
                         mStr += mArr[i] + '\n'
                    }
                    document.getElementById('keytext').value = mStr

                    // this.updateLi.textareaText = mStr
                    // console.log(mStr)
                    // console.log(this.updateLi.textareaText)
                }
            })
        }

    }
}
</script>

<style lang="scss" scoped>

    .checkBox {
        float: left;
    }
    .accounthead {
      background-color: #f9f6f9;
        position: relative;
        text-align: left;
        width: 100%;
        height: 70px;
        font-size: 22px;
        line-height: 86px;
        // border-bottom: 1px solid #ccc;
        span {
            position: absolute;
            bottom: -9px;
            left:0;
            // margin-bottom: 10px;
            // margin-left: 19px;
        }
    }

    .bigbox {
        background-color: #fff;
        padding-top: 50px;
        padding-left: 161px;
        padding-right: 161px;
    }
    .searchbox{
        height: 40px;
        background-color: #fff;
        position: relative;
        .searchInput {
            position: absolute;
            left: 163px;
            transform: translateX(-50%);
            margin: 0 auto;
            width: 327px;
        }
        .searchBtn {
            // background-color: #BFBFBF;
            background-color: #f5f7fa;
        }
    }
    

    .keyword {
       position: relative;
       width: 100%;
       margin-top: 20px;
       font-size: 18px;
       box-sizing: border-box;
       .keywordhead {
          text-align: left;
          .right {
             cursor: pointer;
             color: #B25262;
             font-size: 13px;
             float: right;
          }
       }
       .el-input__inner {
           border: 1px solid #c9c9c9;
       }
       .keywordbody {
          box-sizing: border-box;
          border: 1px solid #c9c9c9;
          border-radius: 4px;
          height: 128px;
          width: 100%;
          padding: 0 20px;
          .keywordbodyT {
             height: 50%;
            text-align: left;
            line-height: 60px;
            border-bottom: 1px solid #ccc;
            .penico {
               float: right;
               margin-top: 22px;
            }
            .lajiico {
                width: 20px;
                height: 20px;
                margin-left: 20px;
               float: right;
               margin-top: 24px;
            }
            .key15 {
               color: #4F8AC1;
               font-size: 15px;
            }
          }
          .keywordbodyB {
             color: #7E7E7E;
             font-size: 15px;
             text-align: left;
          }
       }
       .keyfoot {
          position: relative;
          height: 175px;
          width: 100%;
          .el-button {
             width: 116px;
             height: 44px;
          }
          .keywordfoot {
          position: absolute;
          right: 0;
          bottom: 40px;
         }
      }
       
    }

     .newBtn {
        display: inline;
        float: right;
        border:1px solid rgba(64,131,231,1);
        border-radius:8px;
        width: 109px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-top: 7px;
        font-size: 16px;
        color: #4083E7;
        cursor: pointer;
    }

    .moudlename {
       text-align: left;
       >div {
          font-size: 20px;
       }
       .moudleinput {
          width: 213px;
          height: 35px;
          font-size: 18px;
       }
       .disInput {
           background-color: #eee;
           border: 1px solid #000;
       }
    }

    .moudlecon {
       text-align: left;
       .text1 {
          font-size: 20px;
          color: #5D5D5D;
       }
       .text2 {
          color: #666666;
          font-size: 13px;
       }
       textarea {
          width:100%;
          height:292px;
       }
    }
</style>



